/**
 * 基础菜单 我的用户管理  自定义页面
 */
<template>
  <div style="float: left;width: 100%;">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">档案管理</el-breadcrumb-item>
      <el-breadcrumb-item>开始考试</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 设置悬浮框-->
    <up ref="sticky_">
    <div>
        <CountDown :fatherMethod="submit" ref="mychild"  :countTime="countTime"></CountDown>
        <div style="margin-top: 30px;margin-left: 88%">
          <!-- <el-button type="danger" plain @click="submit()">提交试卷</el-button><br/><br/>
          <el-button type="warning" plain @click="stop()">{{isContinue}}</el-button> -->
        </div>
    </div>
    </up>
    <!-- 搜索筛选 -->
    <div style="border: #BBBBBB solid 1px;width: 100%;height: 120px;margin-top: 20px;margin-bottom: 20px;">
        <p style="text-align: center;">
          <span style="font-size: 40px">{{this.formInline.UserExam.information.examName}}</span><br><br>
          <span>考生姓名：{{this.formInline.UserExam.user.name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>考试时长：{{this.formInline.UserExam.information.allTime}} 分钟</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color: red;font-size: 20px;">满分：{{this.listData.paper.singleTotal+this.listData.paper.multipleTotal+this.listData.paper.judgeTotal+this.listData.paper.fillTotal+this.listData.paper.shortTotal}} 分</span>

        </p>
    </div>
    <div>
    <div style="width: 70%;float: left;">
      <!-- 单选-->
        <div v-if="this.single.length>0">
          <p>单选题 ( 每题 {{this.listData.paper.singleDefault}} 分)</p>
          <div style="border:#C8C9CC solid 1px" >
            <div v-for="(singleque,index) in this.single" style="margin-left: 20px;" :id="'sin'+index">
              <div>
              <p>{{index+1}}. {{singleque.title}}( ):</p>

                <ol type="A">
                  <li v-for="(option,sinindex) in singleque.optionList" style="margin-bottom: 10px;">
                  <label :for="'sin:'+index+':'+sinindex">{{option.content}}</label>
                  <input :id="'sin:'+index+':'+sinindex" type="radio" v-model="useranswer.singleanswer[index]" :disabled="isDisable" :value="sinindex+1+':'+option.id"/>
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <!-- 多选题-->
        <div v-if="this.multiple.length>0">
          <p>多选题 ( 每题 {{this.listData.paper.multipleDefault}} 分)</p>
          <div style="border: #C8C9CC solid 1px" >
            <div v-for="(multipleque,index2) in this.multiple" style="margin-left: 20px;" :id="'multi'+index2">
              <div v-if="multipleque.type==2">
              <p>{{index2+1}}. {{multipleque.title}}( ):</p>
                <ol type="A">
                  <li v-for="(option2,mulindex) in multipleque.optionList" style="margin-bottom: 10px;">
                  <label :for="'multi:'+index2+':'+mulindex" >{{option2.content}}</label>
                   <input :id="'multi:'+index2+':'+mulindex" type="checkbox" v-model="useranswer.multipleanswer" :disabled="isDisable" :value="index2+':'+(mulindex+1)+':'+option2.id" @click="addoption(index2,mulindex)"/>
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <!-- 判断题-->
        <div v-if="this.judge.length>0"  id="sin1">
          <p>判断题 ( 每题 {{this.listData.paper.judgeDefault}} 分)</p>
          <div style="border: #C8C9CC solid 1px" >
            <div v-for="(question3,index3) in this.judge" style="margin-left: 20px;" :id="'judge'+index3">
              <div v-if="question3.type==3">
              <p>{{index3+1}}. {{question3.title}}:</p>
              <p>
              <input :id="'judge:'+index3+':1'" type="radio" v-model="useranswer.judgeanswer[index3]" :disabled="isDisable" value="true"/><label :for="'judge:'+index3+':1'">True</label>&nbsp;&nbsp;
              <input :id="'judge:'+index3+':2'" type="radio" v-model="useranswer.judgeanswer[index3]" :disabled="isDisable" value="false"/><label :for="'judge:'+index3+':2'">False</label>
              </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 填空题-->
        <div v-if="this.fill.length>0">
          <p>填空题 ( 每题 {{this.listData.paper.fillDefault}} 分)</p>
          <div style="border: #C8C9CC solid 1px" >
            <div v-for="(question4,index4) in this.fill" style="margin-left: 20px;" :id="'fill'+index4">
              <div v-if="question4.type==4">
              <p>{{index4+1}}. {{question4.title}}:</p>
              <p>答：
              <el-input
                type="textarea"
                :disabled="isDisable"
                style="width: 300px;"
                autosize
                placeholder="请输入答案"
                v-model="useranswer.fillanswer[index4]">
              </el-input>
              <!-- <el-input style="width: 300px;" autosize v-model="useranswer.fillanswer[index4]" :disabled="isDisable" value="" placeholder="请输入答案"> -->
              <!-- <i
                  class="el-icon-edit el-input__icon"
                  slot="suffix"
               >
                </i> -->
              <!-- </el-input> -->
              </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 简答题-->
        <div v-if="this.short.length>0">
          <p>简答题 ( 每题 {{this.listData.paper.shortDefault}} 分)</p>
          <div style="border: #C8C9CC solid 1px" >
            <div v-for="(question5,index5) in this.short" style="margin-left: 20px;" :id="'short'+index5">
              <div v-if="question5.type==5">
              <p>{{index5+1}}. {{question5.title}}:</p>
              <p style="margin-right: 50px;">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4}"
                  placeholder="请输入内容"
                  v-model="useranswer.shortanswer[index5]">
                </el-input>
                <!-- <el-input
                  :disabled="isDisable"
                  type="textarea"
                  :rows="5"
                  value=""
                  placeholder="请输入内容"
                  v-model="useranswer.shortanswer[index5]">
                </el-input> -->
              </p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 设置悬浮框-->
    <up ref="sticky_">
    <div style="border:#C8C9CC solid 1px;width: 27%;height: 400px;float: left;margin-top: 52px;margin-left: 20px;overflow-y: auto;">
      <up ref="sticky_">
      <div style="background-color: rgba(0,0,0,0.2);height: 40px;line-height: 40px;">
      <span style="color: white;">&nbsp;&nbsp;|&nbsp;&nbsp;答题卡&nbsp;</span>
      <el-button size="mini" type="danger" plain @click="submit()">提交试卷</el-button>
      <el-button size="mini" type="warning" plain @click="stop()">{{isContinue}}</el-button>
      </div>
      </up>
      <!-- 单选-->
      <div v-if="this.single.length>0" style="float: left;width: 100%;">
        <p>&nbsp;&nbsp;单选题</p>
        <div v-for="(singleque,index) in this.single" style="margin-left: 20px;float: left;margin-bottom: 5px;">
          <button v-if="useranswer.singleanswer[index]==null" style="border: #82848A 1px solid;border-radius: 17px;width: 34px;background-color: white;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: #82848A;" @click="sinskip(index)">{{index+1}}</button>
          <button v-if="useranswer.singleanswer[index]!=null" @click="sinskip(index)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index+1}}</button>
        </div>
      </div>
      <!-- 多选-->
      <div v-if="this.multiple.length>0" style="float: left;width: 100%;">
        <p>&nbsp;&nbsp;多选题</p>
        <div v-for="(multipleque,index2) in this.multiple" style="margin-left: 20px;float: left;margin-bottom: 5px;">
         <button v-if="useranswer.multiansoption[index2]!=index2" @click="multiskip(index2)" style="border: #82848A 1px solid;border-radius: 17px;width: 34px;background-color: white;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: #82848A;">{{index2+1}}</button>
          <button v-if="useranswer.multiansoption[index2]==index2"  @click="multiskip(index2)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index2+1}}</button>
        </div>
      </div>
      <!-- 判断题-->
      <div v-if="this.judge.length>0" style="float: left;width: 100%;margin-bottom: 5px;">
        <p>&nbsp;&nbsp;判断题</p>
        <div v-for="(question3,index3) in this.judge" style="margin-left: 20px;float: left;margin-bottom: 5px;">
         <button v-if="useranswer.judgeanswer[index3]==null" @click="judgeskip(index3)" style="border: #82848A 1px solid;border-radius: 17px;width: 34px;background-color: white;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: #82848A;" >{{index3+1}}</button>
          <button v-if="useranswer.judgeanswer[index3]!=null"  @click="judgeskip(index3)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index3+1}}</button>
        </div>
      </div>
      <br>
      <!-- 填空题-->
      <div v-if="this.fill.length>0" style="float: left;width: 100%;">
        <p>&nbsp;&nbsp;填空题</p>
        <div v-for="(question4,index4) in this.fill" style="margin-left: 20px;float: left;margin-bottom: 5px;">
         <button v-if="useranswer.fillanswer[index4]==null || useranswer.fillanswer[index4]==''" @click="fillskip(index4)" style="border: #82848A 1px solid;border-radius: 17px;width: 34px;background-color: white;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: #82848A;">{{index4+1}}</button>
          <button v-if="useranswer.fillanswer[index4]!=null && useranswer.fillanswer[index4]!=''"  @click="fillskip(index4)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index4+1}}</button>
        </div>
      </div>
      <!-- 简答题-->
      <div v-if="this.short.length>0" style="float: left;width: 100%;">
        <p>&nbsp;&nbsp;简答题</p>
        <div v-for="(question5,index5) in this.short" style="margin-left: 20px;float: left;margin-bottom: 5px;">
         <button v-if="useranswer.shortanswer[index5]==null || useranswer.shortanswer[index5]==''" @click="shortskip(index5)" style="border: #82848A 1px solid;border-radius: 17px;width: 34px;background-color: white;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: #82848A;">{{index5+1}}</button>
          <button v-if="useranswer.shortanswer[index5]!=null && useranswer.shortanswer[index5]!=''"  @click="shortskip(index5)" style="border: #A4DA89 1px solid;border-radius: 17px;width: 34px;background-color: #A4DA89;height: 34px;vertical-align:middle;
    text-align: center;font-size: 2px;font-weight: 300;color: white;">{{index5+1}}</button>
        </div>
      </div>
    </div>
    </up>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import axios from "axios";
import CountDown from '@/components/countdown';  //引入倒计时插件路径
import up from '@/components/up';
export default {
  //new Vue
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",
      timecount:0,
      multicount:[],
      isContinue:"暂停考试",
      isDisable:false, //禁用
      lastmultioption:[],
      editForm: {
        id:"",
        account: "",
        password:"",
        status: "",
        roleId:""
        // token: localStorage.getItem("logintoken"),
      },
      // rules表单验证
      rules: {
        // deptName: [
        //   { required: true, message: "请输入部门名称", trigger: "blur" },
        // ],
        // deptNo: [
        //   { required: true, message: "请输入部门代码", trigger: "blur" },
        // ],
      },
      //子传父的数据存放位置 搜索用rabcManager
      formInline: {
        startPage: 1,
        limit: 5,
        UserExam:{}
        // token: localStorage.getItem("logintoken"),
      },
      listData: {}, //后端查出的列表用户数据
      single:[],  //单选
      multiple:[], //多选
      judge:[],  //判断
      fill:[],  //填空题
      short:[],  //简答题
      useranswer:{
        singleanswer:[],
        multipleanswer:[],
         multiansoption:[],  //多选题做过的题号
        judgeanswer:[],
        fillanswer:[],
        shortanswer:[]
      },
       countTime: {
                  minute: 11,
                  second: 0
                },
      value: ''
    };
  },
  // 注册组件  分页
  components: {
    Pagination,
    CountDown,
    up
  },
  /**
   * 创建完毕  浏览器 加载我们的页面 自动触发的方法
   */
  created() {
    //直接在这里进行 axios(ajax)请求
    this.formInline.UserExam = JSON.parse(localStorage.userExam);
    this.countTime.minute = this.formInline.UserExam.information.allTime;
    // this.countTime.minute = 0;
    // this.countTime.second = 30;
    console.log(this.formInline.UserExam);
      if(this.formInline.UserExam.isFinish=='未完成'){
        this.formInline.UserExam.isFinish=2;
      }else if(this.formInline.UserExam.isFinish=='已完成'){
         this.formInline.UserExam.isFinish=1;
      };
      if(this.formInline.UserExam.isRead=='未评阅'){
        this.formInline.UserExam.isRead=2;
      }else if(this.formInline.UserExam.isRead=='已评阅'){
         this.formInline.UserExam.isRead=1;
      };
      if(this.formInline.UserExam.information.status=='未开始'){
        this.formInline.UserExam.information.status = 1;
      }else if(this.formInline.UserExam.information.status=='正在进行'){
        this.formInline.UserExam.information.status = 2;
      }else if(this.formInline.UserExam.information.status=='已结束'){
        this.formInline.UserExam.information.status = 3;
      };
    this.getData();
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取试卷详情表
    getData() {
      axios
        .get("http://localhost:8081/Paper/showPaperView", {
          params: {
            id:this.formInline.UserExam.information.paperId
          },
        })
        .then((res) => {
          this.listData = res.data;
          console.log(this.listData);
          this.listData.questions.forEach(s=>{
            if(s.type==1){
              this.single.push(s);
            }else if(s.type == 2){
              this.multiple.push(s);
            }else if(s.type == 3){
              this.judge.push(s);
            }else if(s.type == 4){
              this.fill.push(s);
            }else if(s.type == 5){
              this.short.push(s);
            }
          });
          this.useranswer.multiansoption.length = this.multiple.length;
          this.multicount.length = this.multiple.length*4;
          for(let i=0;i<this.multiple.length*4;++i){
            this.multicount[i]=0;
          }
        })
        .catch((res) => {});
    },
    addoption(index,mulindex){
      console.log("=============================================");
      if(index == 0){
        this.multicount[index+mulindex] ++;
        console.log(this.multicount);
        if(this.multicount[index+mulindex]%2==1){
          this.useranswer.multiansoption[index] = index;
        }else if(this.multicount[index]%2==0 && this.multicount[index+1]%2==0 && this.multicount[index+2]%2==0 && this.multicount[index+3]%2==0){
          this.useranswer.multiansoption[index] = -1;
        }
      }else{
        this.multicount[index+mulindex+3] ++;
        console.log(this.multicount);
        if(this.multicount[index+mulindex+3]%2==1){
          this.useranswer.multiansoption[index] = index;
        }else if(this.multicount[index+3]%2==0 && this.multicount[index+1+3]%2==0 && this.multicount[index+2+3]%2==0 && this.multicount[index+3+3]%2==0){
          this.useranswer.multiansoption[index] = -1;
        }
      }

    },

    //提交试卷
    submit(){

      this.listData.userAnswer = this.useranswer;
      console.log(this.listData.userAnswer);
      this.formInline.UserExam.paperInfomation = this.listData;
      console.log(this.formInline.UserExam);
      axios
        .post("http://localhost:8081/studentExam/conmmitExam", this.formInline.UserExam)
        .then((res) => {
            this.$router.push({ path: '/user/userexam' });
        })
        .catch((res) => {});
    },
    //跳转单选题
    sinskip(index){
      location.href="#sin"+index;
    },
    //跳转多选题
    multiskip(index){
      location.href="#multi"+index;
    },
    //跳转判断题
    judgeskip(index){
       location.href="#judge"+index;
    },
    //跳转填空题
    fillskip(index){
      location.href="#fill"+index;
    },
    //跳转简答题
    shortskip(index){
      location.href="#short"+index;
    },
    stop(){
        this.timecount++;
        if(this.timecount%2 == 1){
           this.$refs.mychild.stoptime();
           this.isContinue = "继续考试";
           this.isDisable = true;
           this.$confirm("现在暂停作答！！点击后开始作答", "考试", {
             confirmButtonText: "确定",
             type: "warning",
           }).then((res)=>{
             alert("开始作答");
             this.$refs.mychild.add();
             this.isContinue = "暂停考试";
             this.isDisable = false;
             this.timecount++;
           }).catch((err)=>{
             alert("开始作答");
             this.$refs.mychild.add();
             this.isContinue = "暂停考试";
             this.isDisable = false;
             this.timecount++;
           })
        }else{
          console.log("我是双击事件");
          this.$refs.mychild.add();
          this.isContinue = "暂停考试";
          this.isDisable = false;
        }
    }
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userManager {
  width: 100%;
}
</style>
